import React, { Component } from 'react';
import {
  View,
  Platform,
  StyleSheet,
  TouchableOpacity,
  Text,
  Image,
  DeviceEventEmitter,
} from 'react-native';
import DatePicker from 'react-native-datepicker';

import PxToDp from '../../utils/PxToDp';
import getDays from '../../utils/DateUtils';
import FontFamilys from '../../utils/FontFamilys';
import { fetchFilterTime, fetchEveryDay } from '../../actions/ImportOverviewAction';

export default class FilterDate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      isClick: true,
      visitDateTime: this._getDate(),
      startTime: this.props.startTime ? this.props.startTime : '开始时间',
      endTime: this.props.endTime ? this.props.endTime : '结束时间',
    };
  }

  _getDate() {
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month.toString().length === 1) {
      month = `0${month}`;
    }
    if (day.toString().length === 1) {
      day = `0${day}`;
    }
    return `${year}-${month}-${day}`;
  }

  back() {
    this.props.navigator.pop();
  }

  commit() {
    const days = getDays(this.state.startTime, this.state.endTime);
    if (this.state.startTime.length && this.state.endTime.length === 10) {
      if (this.state.startTime > this._getDate() || this.state.endTime > this._getDate()
        || this.state.startTime === this._getDate() || this.state.endTime === this._getDate()) {
        DeviceEventEmitter.emit('showToast', '开始时间或结束时间不能等于大于当前时间!');
        return;
      }
      if (this.state.startTime > this.state.endTime) {
        DeviceEventEmitter.emit('showToast', '开始时间不能大于结束时间!');
        return;
      }
      if (days > 7) {
        DeviceEventEmitter.emit('showToast', '目前最多可统计1周内数据，请重新选择!');
        return;
      }
    }

    this.props.dispatch(fetchFilterTime(this.state.startTime.length === 10 ? this.state.startTime : '',
      this.state.endTime.length === 10 ? this.state.endTime : ''));

    this.props.dispatch(fetchEveryDay(this.state.startTime.length === 10 ? this.state.startTime : '',
     this.state.endTime.length === 10 ? this.state.endTime : '', this.props.clickBtn, this.props.all,
     this.props.app, this.props.vr, this.props.led, this.props.h5, this.props.web, this.props.drive,
     this.props.clickBtn === 1 ? '' : this.props.carIds));
    if (navigator) {
      this.props.navigator.pop();
    }
  }

  render() {
    return (
      <View style={[style.flex, style.bg]}>
        <View style={[style.header, style.row]}>
          <TouchableOpacity
            style={[style.flex, style.titleStart]}
            onPress={() => this.back()}
          >
            <Image style={style.backIcon} source={require('../../img/go_back.png')} />
          </TouchableOpacity>
          <View style={[style.flex, style.center]}>
            <Text style={style.nameTitle}>筛选日期</Text>
          </View>
          <TouchableOpacity
            style={[style.flex, style.titleEnd]}
            onPress={() => this.commit()}
          >
            <Text style={style.commit}>完成</Text>
          </TouchableOpacity>
        </View>
        <View style={style.top} />
        <View style={style.container}>
          <View style={[style.titleView, style.row]}>
            <View style={[style.flex, style.textTime]}>
              <Text style={[style.text]}>{this.state.startTime}</Text>
              <View style={style.line} />
            </View>
            <View style={[style.flex, style.textTime]}>
              <Text style={[style.text]}>{this.state.endTime}</Text>
              <View style={style.line} />
            </View>
          </View>
          <View style={[style.row, style.to]}>
            <Text>至</Text>
          </View>
          <View style={[style.datepicker, { position: 'absolute' }]}>
            <DatePicker
              style={{ width: PxToDp(150) }}
              date={this.state.visitDateTime}
              mode="date"
              format="YYYY-MM-DD"
              confirmBtnText="确认"
              cancelBtnText="取消"
              showIcon={false}
              customStyles={{
                dateIcon: {
                  top: 4,
                },
                dateText: {
                  marginLeft: PxToDp(0),
                  color: '#333',
                  fontSize: PxToDp(12),
                },
                dateInput: {
                  borderRadius: PxToDp(2),
                  height: 0,
                  width: 0,
                  borderWidth: 0,
                },
              }}
              onDateChange={(date) => {
                this.setState({ startTime: date });
              }}
            />
          </View>
          <View style={[style.datepickerEnd, { position: 'absolute' }]}>
            <DatePicker
              style={{ width: PxToDp(150) }}
              date={this.state.visitDateTime}
              mode="date"
              format="YYYY-MM-DD"
              confirmBtnText="确认"
              cancelBtnText="取消"
              showIcon={false}
              customStyles={{
                dateIcon: {
                  top: 4,
                },
                dateText: {
                  marginLeft: PxToDp(0),
                  color: '#333',
                  fontSize: PxToDp(12),
                },
                dateInput: {
                  borderRadius: PxToDp(2),
                  height: 0,
                  width: 0,
                  borderWidth: 0,
                },
              }}
              onDateChange={(date) => {
                this.setState({ endTime: date });
              }}
            />
          </View>
        </View>
      </View>
    );
  }
}
const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bg: {
    backgroundColor: '#fff',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  header: {
    height: PxToDp(44),
    alignItems: 'center',
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleStart: {
    justifyContent: 'center',
    paddingLeft: PxToDp(10),
  },
  titleEnd: {
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: PxToDp(10),
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  nameTitle: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#121212',
  },
  commit: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(14),
    color: '#418cff',
  },
  container: {
    backgroundColor: '#fff',
    marginTop: PxToDp(24),
  },
  top: {
    height: PxToDp(15),
    backgroundColor: '#F5F5F5',
  },
  titleView: {
    marginTop: PxToDp(52),
  },
  textTime: {
    alignItems: 'center',
  },
  text: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(14),
    color: '#333333',
  },
  line: {
    backgroundColor: '#418cff',
    height: PxToDp(1),
    width: PxToDp(118),
    marginTop: PxToDp(7),
  },
  to: {
    justifyContent: 'center',
    marginTop: PxToDp(-10),
  },
  datepicker: {
    position: 'absolute',
    left: PxToDp(30),
    flex: 1,
    overflow: 'hidden',
    zIndex: 0,
    top: PxToDp(40),
    height: PxToDp(60),
  },
  datepickerEnd: {
    position: 'absolute',
    right: PxToDp(30),
    flex: 1,
    overflow: 'hidden',
    zIndex: 0,
    top: PxToDp(40),
    height: PxToDp(60),
  },
});
